<template>
  <div class="app-container">
    <!-- 操作按钮 -->
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加分组</el-button>
    </div>
    <div class="table_box table_box_new table-section" >
    <!-- 分组表格 -->
    <el-table :data="groupList" border style="width: 100%; ">
      <el-table-column prop="id" label="ID" ></el-table-column>
      <el-table-column prop="tenantId" label="店铺ID" ></el-table-column>
      <el-table-column prop="tenantName" label="店铺名称" ></el-table-column>
      <el-table-column prop="machineGroups" label="云机分组" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>
    <!-- 添加/修改分组弹窗 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="500px" 
      @close="handleDialogClose"
    >
      <el-form ref="groupForm" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="店铺" prop="tenantId">
            <el-select v-model="formData.tenantId" placeholder="请选择店铺" clearable filterable @change="getTenantNaem">
              <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName"
                :value="dict.tenantId" />
            </el-select>
          </el-form-item>

        <el-form-item label="云机分组" prop="machineGroups">
           <el-select v-model="formData.machineGroups"   multiple  placeholder="请选择" clearable filterable>
             <el-option v-for="dict in allMachineGroup" :key="dict.dictValue" :label="dict.dictLabel"
                       :value="dict.dictValue"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addGroup , groupList , updateGroup} from '@/api/tenantApis/cloudMachine'

export default {
  name: "yunjiGroup",
   computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  data() {
    return {
        Loading:false,
        allMachineGroup:[],
      queryForm:{
        pageSize:10,
        pageNum:1
      },  
      groupList: [], // 分组列表数据
      dialogVisible: false, // 弹窗显示状态
      dialogTitle: '', // 弹窗标题
      formData: {
        id: '',
        tenantId: '',
        tenantName: '',
        machineGroups: ''
      },
      formRules: {
        tenantId: [
          { required: true, message: '请选择店铺名称', trigger: 'blur' }
        ],
      
        machineGroups: [
          { required: true, message: '请输入云机分组信息', trigger: 'blur' }
        ]
      },
     
    };
  },
  created() {
    this.getList();
    this.getYunji()
  },
  methods: {
    // 获取分组列表
    getList() {
        groupList(this.queryForm).then(res => { 
            this.groupList = res.rows
            
        })
    },
     getYunji() {
      this.getDicts("machine_group").then((res) => {
        this.allMachineGroup = res.data
        
      });
    },
    // 添加分组
    handleAdd() {
      this.dialogTitle = '添加分组';
      this.formData = {
        id: undefined,
        tenantId: '',
        tenantName: '',
        machineGroups: ''
      };
      this.dialogVisible = true;
    },
    
    // 修改分组
    handleEdit(row) {
      this.dialogTitle = '修改分组';
      this.formData = { ...row };
      if(row.machineGroups) {
        this.formData.machineGroups = row.machineGroups.split(',')
      }
      this.dialogVisible = true;
    },
    
   
    
    // 提交表单
    submitForm() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
            if(this.formData.machineGroups.length > 0) {
                this.formData.machineGroups = this.formData.machineGroups.join(',')
            } else {
                this.formData.machineGroups = ''
            
            }
          if (this.formData.id) {
            // 修改分组
              updateGroup(this.formData).then(res=> {
                this.$message.success('修改成功');
                this.getList()
            }).catch(()=> {
               
            })
            
          } else {
           
            addGroup(this.formData).then(res=> {
                this.$message.success('添加成功');
                this.getList()
            }).catch(()=> {
               
            })
            
          }
          
          this.getList();
          this.dialogVisible = false;
        }
      });
    },
    getTenantNaem(val) {
        this.formData.tenantName = this.tenantList.find(item => item.tenantId === val).tenantName
    },
    // 弹窗关闭时的处理
    handleDialogClose() {
      this.$refs.groupForm.resetFields();
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}


.danger-text {
  color: #f56c6c;
}
</style>